<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>书籍管理</title>
    <script src="lib/jQuery/jquery-3.7.1.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            font-size: 16px;
            line-height: 1.5;
            color: #212529;
            background-color: #f8f9fa;
            padding: 20px;
        }
        header {
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        header form {
            display: flex;
            gap: 10px;
            align-items: center;
        }
        header form label {
            margin-bottom: 0;
        }
        header form input, header form select {
            padding: 5px 10px;
            border-radius: 4px;
            border: 1px solid #ced4da;
        }
        header button, footer button {
            padding: 5px 15px;
            border-radius: 4px;
            border: 1px solid transparent;
            background-color: #007bff;
            color: white;
            cursor: pointer;
        }
        header button:hover, footer button:hover {
            background-color: #0056b3;
        }
        table {
            width: 100%;
            margin-bottom: 20px;
            border-collapse: collapse;
            background-color: white;
        }
        table th, table td {
            padding: 12px;
            text-align: left;
            border: 1px solid #dee2e6;
        }
        table th {
            background-color: #007bff;
            color: white;
        }
        table tr:nth-child(even) {
            background-color: #f2f2f2;
        }
        table tr:hover {
            background-color: #ddd;
        }
        footer {
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }
        footer div {
            display: flex;
            gap: 10px;
        }
        footer ul {
            list-style: none;
            display: flex;
            gap: 5px;
        }
        footer ul li a {
            text-decoration: none;
            color: #007bff;
        }
        footer ul li a:hover {
            text-decoration: underline;
        }
        aside {
            width: 300px;
            padding: 20px;
            border: 1px solid #ccc;
            background-color: white;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: none;
        }
        aside form {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        aside form label {
            display: flex;
            flex-direction: column;
        }
        aside form input, aside form textarea, aside form select {
            padding: 5px 10px;
            border-radius: 4px;
            border: 1px solid #ced4da;
        }
        aside form button {
            align-self: flex-end;
        }
    </style>
</head>
<body>
    <h3>书籍管理</h3>
    <header>
        <form>
            <label>
                书名:
                <input type="text" name="bookName"/>
            </label>
            <label>
                作者:
                <select name="author">
                    <option value="">作者</option>
                    <option value="罗贯中">罗贯中</option>
                    <option value="施耐庵">施耐庵</option>
                    <option value="吴承恩">吴承恩</option>
                    <option value="曹雪芹">曹雪芹</option>
                </select>
            </label>
            <label>
                发布日期:
                <input type="datetime-local" name="begin"/>-
                <input type="datetime-local" name="end"/>
            </label>
            <button type="button" onclick="queryByParams()">查询</button>
        </form>
        <!-- 点击后打开弹出层 -->
        <button type="button" onclick="$('#hidden-form').show()">新增</button>
    </header>
    <div>
        <table>
            <thead>
                <tr>
                    <th>序号</th>
                    <th>书名</th>
                    <th>简介</th>
                    <th>作者</th>
                    <th>数量</th>
                    <th>价格</th>
                    <th>添加日期</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="table-data">
                <tr>
                    <td>1</td>
                    <td>三国演义</td>
                    <td>东汉末年分三国</td>
                    <td>罗贯中</td>
                    <td>100</td>
                    <td>99.99</td>
                    <td>2021-02-03</td>
                    <td>
                        <button onclick="openDialog(3)">编辑</button>
                        <button>删除</button>
                    </td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>三国演义</td>
                    <td>东汉末年分三国</td>
                    <td>罗贯中</td>
                    <td>100</td>
                    <td>99.99</td>
                    <td>2021-02-03</td>
                    <td>
                        <button>编辑</button>
                        <button>删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <footer>
        <div>
            <p>共有<span id="total-count">0</span>条数据记录</p>
            <p><span id="current-page">1</span>/<span id="total-page">1</span>页</p>
        </div>
        <ul>
            <li><a href="#" onclick="toPageIndex(1)">首页</a></li>
            <li><a href="#" onclick="toPageIndex(currentPage - 1)">上一页</a></li>
            <li><a href="#" onclick="toPageIndex(currentPage + 1)">下一页</a></li>
            <li><a href="#" onclick="toPageIndex(totalPage)">最后一页</a></li>
        </ul>

        <div style="margin-left: 20px">
            <label for="pageSize">
                每页数量
            </label>
            <!-- 数量的选项变化后要重新发请求渲染页面 -->
            <select id="pageSize" onchange="pageSizeChanged()">
                <option value="5">5</option>
                <option value="10" selected>10</option>
                <option value="20">20</option>
            </select>
        </div>

        <div style="margin-left: 20px">
            跳转到<input style="width: 50px"
                         type="number" id="page-index"/>页
            <button style="margin-left: 10px" onclick="toPage()">GO</button>
        </div>
    </footer>

    <!-- 为了做新增/修改 -->
    <!-- 弹出层：默认是隐藏的，需要的时候打开 -->
    <aside id="hidden-form">
        <form>
            <label>
                <!-- 给修改使用的 -->
                <input type="hidden" name="id"/>
            </label>
            <label>
                书名:
                <input type="text" name="bookName"/>
            </label>
            <label>
                简介:
                <textarea name="description" style="vertical-align: text-top"></textarea>
            </label>
            <label>
                作者:
                <input type="text" name="author"/>
            </label>
            <label>
                数量:
                <input type="number" name="number"/>
            </label>
            <label>
                价格:
                <input type="number" name="price"/>
            </label>
            <!-- 默认的重置按钮，点了之后是触发了所在form元素的reset -->
            <!--<input type="reset">-->
        </form>

        <div style="float: right">
            <!-- 提交数据发请求 -->
            <button type="button" onclick="sendData()">提交</button>
            <!-- 关闭弹出层 -->
            <button type="button" onclick="closeDialog()">取消</button>
        </div>
    </aside>
</body>
<script>
    // 全局的当前页码
    let currentPage = 1
    // 全局的每页数量
    let pageSize = 10
    // 全局的数据总量，，每次查询渲染完成要修改
    let totalCount = 0
    // 全局的总页数，每次查询渲染完成要修改
    let totalPage = 0
    // 控制提交按钮发起请求的类型，post/put
    let type = 'post'

    /**
     * 根据页面上的条件和页码信息查询分页数据
     */
    function queryPage() {
        $.ajax({
            // 页面：localhost:8080/ssm_project/books.html
            // 接口：localhost:8080/ssm_project/book/queryPage
            url: 'book/queryPage', // 相对路径
            type: 'post',
            data: JSON.stringify({
                params: {
                    bookName: $('input[name=bookName]').eq(0).val().trim(),
                    author: $('select[name=author]').eq(0).val().trim(),
                    begin: $('input[name=begin]').eq(0).val().trim(),
                    end: $('input[name=end]').eq(0).val().trim()
                },
                pageSize: $('select#pageSize').val().trim(),
                currentPage: currentPage // 变量化，每次查询或切换页码去修改这个变量
            }),
            dataType: 'json',
            contentType: 'application/json',
            success: function (result) {
                if (result.code === 200) {
                    // 渲染表格
                    renderTable(result.data)
                }
            }
        })
    }
    // 页面加载完成即查询
    queryPage()

    function renderTable(obj) {
        console.log(obj)
        $('#table-data').empty() // 只要查询成功，就清空表格
        if (obj.data.length > 0) {
            obj.data.forEach(function (item) {
                let new_tr = '<tr>'
                             + '<td>' + item.id + '</td>'
                             + '<td>' + item.bookName + '</td>'
                             + '<td>' + item.description + '</td>'
                             + '<td>' + item.author + '</td>'
                             + '<td>' + item.number + '</td>'
                             + '<td>' + item.price + '</td>'
                             + '<td>' + item.publishedDate + '</td>'
                             + '<td>'
                                + "<button onclick='openDialog(" + item.id + ")'>编辑</button>"
                                + "<button onclick='deleteBook(" + item.id + ")'>删除</button>"
                             + '</td>'
                             + '</tr>'
                $('#table-data').append(new_tr)
            })
        }
        // 修改总数据量
        totalCount = obj.totalCount
        $('#total-count').text(totalCount)
        // 修改当前页码
        $('#current-page').text(obj.currentPage)
        // 修改总数页
        totalPage = obj.totalPage
        $('#total-page').text(totalPage)
    }

    /**
     * 查询按钮
     */
    function queryByParams() {
        // 总是回到第一页
        currentPage = 1 // 可能不是1
        queryPage()
    }

    /**
     * 切换到第几页
     * @param index 页码
     */
    function  toPageIndex(index) {
        // 控制上下限
        if(index < 1 || index > totalPage) {
            return
        }
        // 去除多余的查询，同页不变化
        if (index === currentPage) {
            return
        }
        currentPage = index
        queryPage()
    }

    /**
     * 直接输入页码
     */
    function toPage() {
        // 获取输入框的内容修改currentPage
        toPageIndex($('#page-index').val())
        $('#page-index').val('')
    }

    /**
     * 每页数量变化
     */
    function pageSizeChanged() {
        // 可能不在第一页，回到第一页
        currentPage = 1
        // 直接发请求，里面的pageSize是直接从页面的下拉选框获取的
        queryPage()
    }

    /**
     * 发送请求提交数据
     */
    function sendData() {
        console.log(type)
        $.ajax({
            url: 'book',
            type: type, // 可能是post，可能是put
            data: JSON.stringify({
                id: $('input[name=id]').eq(0).val().trim(),
                bookName: $('input[name=bookName]').eq(1).val().trim(),
                description: $('textarea[name=description]').eq(0).val().trim(),
                author: $('input[name=author]').eq(0).val().trim(),
                number: $('input[name=number]').eq(0).val().trim(),
                price: $('input[name=price]').eq(0).val().trim()
            }),
            dataType: 'json',
            contentType: 'application/json;charset=UTF-8',
            success: function (result) {
                alert(result.msg)
                if (result.code === 200) {
                    if (type === 'put') {
                        // 重新渲染表格，或者修改完成后端返回修改后单条数据，修改当前行的tr
                        queryPage()
                    }
                    // 成功了要关闭弹出层
                    closeDialog() // 会重置type为post
                }
            }
        })
    }

    /**
     * 关闭弹出层
     */
    function closeDialog() {
        // 清空数据
        // jQuery的元素对象通过[0]，会得到元素的DOM对象
        $('#hidden-form>form')[0].reset()
        $('#hidden-form').hide()
        type = 'post'
    }

    /**
     * 编辑，打开弹出层并回显原始数据
     * @param id
     */
    function openDialog(id) {
        $.ajax({
            url: 'book/' + id,
            type: 'get',
            success: function (result) {
                if (result.code === 200) {
                    // 渲染表单，打开弹出层
                    renderForm(result.data)
                } else {
                    alert(result.msg)
                }
            }
        })
    }

    /**
     * 根据结果对象渲染表单
     * @param book
     */
    function renderForm(book) {
        $('input[name=id]').val(book.id)
        $('input[name=bookName]').eq(1).val(book.bookName)
        $('textarea[name=description]').eq(0).val(book.description)
        $('input[name=author]').eq(0).val(book.author)
        $('input[name=number]').eq(0).val(book.number)
        $('input[name=price]').eq(0).val(book.price)
        type = 'put'
        $('#hidden-form').show()
    }

    /**
     * 根据id删除单个
     * @param id
     */
    function deleteBook(id) {
        $.ajax({
            url: 'book/' + id,
            type: 'delete',
            success: function (result) {
                alert(result.msg)
                queryPage()
            }
        })
    }
</script>
</html>